<template>
	<view>
		<form @submit="onSubmit">
		      <view>
		        <view>序号:</view>
		        <input type="text" name="itemNo" v-model="formData.itemNo" placeholder="请输入序号" />
		      </view>
		      
		      <!-- <view>
		        <view>专业：</view>
		        <input type="text" name="major" v-model="formData.major" placeholder="请输入专业" />
		      </view> -->
			  
			  <view class="uni-title uni-common-pl" >专业：</view>
			  <view >
			  	<view class="uni-list-cell">
			  		<view class="uni-list-cell-left">
			  					
			  		</view>
			  		<view class="uni-list-cell-db">
			  			<picker @change="bindPickerChange1" :value="index1" :range="array1" v-model="formData.major" name="major">
			  				<view class="uni-input">{{array1[index1]}}</view>
			  			</picker>
			  		</view>
			  	</view>
			  </view>
		      
			  <!-- <view>
			    <view>线路：</view>
			    <input type="text" name="line" v-model="formData.line" placeholder="请输入线路" />
			  </view> -->
			  
			  <view class="uni-title uni-common-pl" >线路：</view>
			  <view class="uni-list">
			  	<view class="uni-list-cell">
			  		<view class="uni-list-cell-left">
			  					
			  		</view>
			  		<view class="uni-list-cell-db">
			  			<picker @change="bindPickerChange2" :value="index2" :range="array2" v-model="formData.line" name="line">
			  				<view class="uni-input">{{array2[index2]}}</view>
			  			</picker>
			  		</view>
			  	</view>
			  </view>
			  
			  <!-- <view>
			    <view>日期：</view>
			    <input type="text" name="formDate" v-model="formData.formDate" placeholder="请输入日期" />
			  </view> -->
			  
			  <view class="uni-title uni-common-pl" >日期:</view>
			  <view class="uni-list">
			  	<view class="uni-list-cell">
			  		<view class="uni-list-cell-left">
			  			
			  		</view>
			  		<view class="uni-list-cell-db">
			  			<picker mode="date" :value="date" :start="startDate" :end="endDate"  @change="bindDateChange">
			  				<view class="uni-input">{{date}}</view>
			  			</picker>
			  		</view>
			  	</view>
			  </view>
			  
			  
			  <view>
			    <view>登记车站：</view>
			    <input type="text" name="regiserByStation" v-model="formData.regiserByStation" placeholder="请输入登记车站" />
			  </view>
			  
			  <view>
			    <view>施工单位：</view>
			    <input type="text" name="constructionByUnit" v-model="formData.constructionByUnit" placeholder="请输入施工单位" />
			  </view>
			  
			  <view>
			    <view>负责人：</view>
			    <input type="text" name="manageBy" v-model="formData.manageBy" placeholder="请输入负责人" />
			  </view>
			  
			  <view>
			    <view>负责人电话：</view>
			    <input type="text" name="manageByTel" v-model="formData.manageByTel" placeholder="请输入负责人电话" />
			  </view>
			  
			  <view>
			    <view>作业区段：</view>
			    <input type="text" name="workSection" v-model="formData.workSection" placeholder="请输入作业区段" />
			  </view>
			  
			  <view>
			    <view>施工内容：</view>
			    <input type="text" name="workContent" v-model="formData.workContent" placeholder="请输入施工内容" />
			  </view>
			  
			  <view>
			    <view>牵引动力：</view>
			    <input type="text" name="tractionPower" v-model="formData.tractionPower" placeholder="请输入牵引动力" />
			  </view>
			  
			  <view>
			    <view>触网影响范围：</view>
			    <input type="text" name="conductorRailInfluenceScope" v-model="formData.conductorRailInfluenceScope" placeholder="请输入触网影响范围" />
			  </view>
			  
			  <view>
			    <view>停电影响范围：</view>
			    <input type="text" name="powerOutageInfluenceScope" v-model="formData.powerOutageInfluenceScope" placeholder="请输入停电影响范围" />
			  </view>
			  
			  <view>
			    <view>影响区段：</view>
			    <input type="text" name="impactSegments" v-model="formData.impactSegments" placeholder="请输入影响区段" />
			  </view>
			  
			  <view>
			    <view>影响说明：</view>
			    <input type="text" name="impactDescription" v-model="formData.impactDescription" placeholder="请输入影响说明" />
			  </view>
			  
			  <view>
			    <view>计划编号：</view>
			    <input type="text" name="formCode" v-model="formData.formCode" placeholder="请输入计划编号" />
			  </view>
			  
		      <view>
		        <button form-type="submit" type="primary" >提交表单</button>
		        <button form-type="reset">重置表单</button>
		      </view>
		      
		      {{ obj }}
		    </form>
	</view>
</template>

<script>
	import axios from "axios"
	import { title } from "process";
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				
				date: currentDate,
				array1: ['变电','工务','通信','信号','接触轨'],
				index1: 0,
				array2: ['十七号线','十三号线'],
				index2: 0,
				formData: {
				        itemNo: '',
				        major: '',
						line: '',
						formDate: '',
						regiserByStation: '',
						constructionByUnit: '',
						manageBy: '',
						manageByTel: '',
						workSection: '',
						workContent: '',
						tractionPower: '',
						conductorRailInfluenceScope:'',
						powerOutageInfluenceScope:'',
						impactSegments:'',
						impactDescription:'',
						formCode:''
				},
				obj: null
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			bindPickerChange1: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index1 = e.detail.value
						this.formData.major = this.index1
			        },
			bindPickerChange2: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index2 = e.detail.value
					   this.formData.line = this.index2
					   console.log(this.formData);
			       },
			bindDateChange: function(e) {
				
			            this.date = e.detail.value
						this.formData.formDate = this.date
			        },
			onSubmit(e) {
			      e.preventDefault(); // 防止表单默认提交
				  console.log("test")
			      // console.log(e.target.detail.value);
			      // this.obj = e.target.detail.value;
				  axios.post("http://localhost:82/constructionRequestBase/management",this.formData)
				  .then((data)=>{
					  console.log(data)
				  }).catch((err)=>{
					  console.log(err)
				  })
				  
			    },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style lang="scss">
	input, textarea { border: 1px solid #eee; }
	  form {
	    padding: 20rpx;
	  }
	  view {
	    margin-bottom: 20rpx;
	  }
</style>
